<template>
  <div class='container' style="margin:10px 0;padding:0 10px">
<el-card class="box-card" style="padding:20px"> <!-- form表单搜索新增 -->

 <el-form :inline="true" class="demo-form-inline">
  <el-form-item label="关键字">
   <el-input size="small"  placeholder="根据编号搜索" v-model="keyword"></el-input>
  </el-form-item>
    <el-button style="float: right; padding: 9px 15px" type="primary" @click="search()">搜索</el-button>
    <el-button style="float: right; padding: 9px 15px" @click="clearKeyword">清除</el-button>
  </el-form>
 <el-alert
    :title="`数据一共${counts}条`"
    type="info"
    show-icon
    :closable="false">
  </el-alert>

  <el-table
      :data="list"
      style="width: 100%"
      >
      <el-table-column
        property="id"
        label="编号"
        width="220"
        />
      <el-table-column
        property="questionType"
        label="题型"
        width="80"
        />
      <el-table-column  label="题目编号" width="220" property="questionIDs">
       <template #default="{row}">
         <a href="#" v-for="(item,i) in row.questionIDs" :key="i" class="tiaozhuan" @click="loadDetail(row,i)">{{item.number}}</a>
       </template>
      </el-table-column>
        <el-table-column
      property="addTime"
        label="录入时间"
        width="180"/>
        <el-table-column
      property="totalSeconds"
        label="答题时间(s)"
        width="293"/>
        <el-table-column
      property="accuracyRate"
        label="正确率(%)"
        width="293"/>
        <el-table-column
      property="userName"
        label="录入人"
        width="294"/>
      <el-table-column label="操作" width="80">
      <template #default="row">
          <el-button type="danger" icon="el-icon-delete" circle @click="delArticle(row)"></el-button>
      </template>
    </el-table-column>
    </el-table>
     <el-pagination
     style="float:right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="articleList.page"
      background
      :page-sizes="[20, 30, 50, 100]"
      :page-size="20"
      layout=" prev, pager, next,sizes,jumper"
      :total="counts">
    </el-pagination>
</el-card>
<el-dialog
  title="题目预览"
  :visible.sync="dialogVisible"
  width="47%"
  @close="isClose"
  >
<detailDiglog
  :Detail="Detail"
  ref="close"
  :closeDialog="closeDialog"
  />
</el-dialog>

  </div>
</template>

<script>
// 导入弹层组件
import detailDiglog from '.././components/questions-preview.vue'
// 导入获取列表接口
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
// 获取题型/难度的枚举属性
import { questionType, difficulty } from '@/api/hmmm/constants.js'
console.log(questionType, 'questionType')
// 枚举的方法
function getType (aa) {
  const type = questionType.find((item) => item.value === aa)
  return type ? type.label : '未知题型'
}
// 枚举难度的方法
function getDifficult (aa) {
  const type = difficulty.find((item) => item.value === aa)
  return type ? type.label : '未知难度'
}
console.log(getType(+'1'), '用了+号转数字的题型')
export default {
  // // 注册组件
  components: {
    detailDiglog
  },
  data () {
    return {
      // 存放题目
      list: [],
      articleList: {
        page: 1, // 文章第几页
        pagesize: 10// 每页多少条数据
      },
      counts: 0, // 题目总条数,
      dialogVisible: false, // 控制弹层显示与关闭
      // 传给子组件的数据
      Detail: {},
      // 双向绑定搜索框
      keyword: ''
    }
  },
  created () {
    // 页面一刷新就调用接口刷新页面
    this.loadQuestions()
  },
  methods: {
    // 点击清除input框
    clearKeyword () {
      this.keyword = ''
      this.loadQuestions()
    },
    // 点击搜索
    async search () {
      const searchQuestions = {
        keyword: this.keyword,
        page: this.articleList.page,
        pagesize: this.articleList.pagesize
      }
      const { data } = await randoms(searchQuestions)
      console.log(data, '搜索的结果')
      this.list = data.items
    },
    // 关闭视频
    isClose () {
      this.$refs.close.close()
    },
    // 关闭弹层
    closeDialog () {
      this.dialogVisible = false
    },
    // 点击a标签弹窗题目详情
    async loadDetail (row, index) {
      console.log(row, 'row')
      // 打开弹层
      this.dialogVisible = true
      // this.$refs.open.openDialog()
      const id = row.questionIDs[index].id
      // console.log(row, index, 'row')
      // console.log(id, 'id')
      // 发送获取详情请求
      const { data } = await detail({ id })
      // console.log(data, 'res')
      // 给弹层准备数据
      this.Detail = data
      console.log(this.Detail, 'Detail')
      // 获取题目类型的枚举数据
      this.Detail.questionType = getType(+this.Detail.questionType)
      console.log(this.Detail.questionType, 'this.Detail.questionType')
      // 获取题目难度的枚举数据
      this.Detail.difficulty = getDifficult(+this.Detail.difficulty)
      console.log(this.Detail.difficulty, 'this.Detail.difficulty')
      // 将获取到的有p标签的答案切割掉
    },
    // 获取题目列表
    async loadQuestions () {
      const { data } = await randoms(this.articleList)
      console.log(data)
      this.counts = data.counts
      // 将获取到的数据渲染到列表中
      this.list = data.items
      console.log(this.list, 'this.list')
      // 枚举取出相应的题型
      this.list.forEach(item => {
        // console.log(item)
        item.questionType = getType(+item.questionType)
      })
    },
    // 点击切换每页多少条数据
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.articleList.pagesize = val
      // console.log(this.articleList.pagesize)
      this.loadQuestions()
    },
    // 点击跳转到当前页面
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.articleList.page = val
      this.loadQuestions()
    },
    // 点击组题列表删除
    delArticle (row, index) {
      console.log(row, index, 'rows')
      this.$confirm('您真的要删除该数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await removeRandoms({ id: row.id })
        console.log(res, '删除成功')
        // 删除点击的那个题目,同步更新视图
        this.list.splice(index, 1)
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style scoped lang='less'>
.container{
  margin: 10px 0px;
  padding: 0px 10px;
  ::v-deep .el-card__body{
    padding: 0;
  }
  .box-card{
    .demo-form-inline{
      height: 51px;
    ::v-deep .el-form-item__label{
        width: 80px;
      }
     ::v-deep .el-input__inner{
       width: 168%;
      }
      .el-button--medium{
        height: 32px;
        // line-height: 32px;
        text-align: center;
        font-size: 12px;
      }
    }
   ::v-deep .el-table_1_column_8{
      text-align: center;
    }
    ::v-deep .el-pagination__jump{
      margin-left: 0;

}
::v-deep .el-button--danger{
        width: 32px;
        height: 32px;
        margin: 0;
        text-align: center;
        // line-height: 1;
        padding: 8px;
        background: #fef0f0;
        border-color: #fbc4c4;
            &:hover{
            background: #f56c6c;
            border-color: #f56c6c;
            .el-icon-delete{
               color: #fff;
            }
            }
      }
 ::v-deep .el-icon-delete{
        color: #f56c6c;
  }
 ::v-deep .tiaozhuan{
  display: block;
  width: 200px;
  color: rgb(0, 153, 255);
  }
  }
.el-button--medium{
margin-left: 10px;
}
.el-pagination{
  margin: 20px 0;
}

}

</style>
